<template>
    <el-row :gutter="10">
        <el-col :span="12">
            <mdViewer :value="md" />
        </el-col>
        <el-col  :span="12">
            <h3>效果展示</h3>
            <div>
                <p class="title">我追索人心的深度，却看到了人心的浅薄。 --云雀叫了一整天</p>
            </div>
        </el-col>
    </el-row>
</template>
<script setup >
import md from "../../doc/css/cssDemo/README.md?raw";
import mdViewer from "../common/mdViewer.vue"
</script>
<style scoped lang="scss">
 h3{
    font-size: 20px;
    font-weight: 500;
}
.title {
    white-space: nowrap;
    width: 100ch;
    overflow: hidden;
    animation: typing 5s steps(100) infinite;
}

@keyframes typing {
    from {
        width: 0;
    }
}

</style>